<template>
	<el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
		<el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
			<el-form-item label="卡项名称:" prop="cardName">
				<el-input v-model="form.cardName" placeholder="请输入卡项名称"></el-input>
			</el-form-item>

			<el-form-item label="请关联商品">
				<el-tag class="spec-tag" v-for="(item, index) in form.cardVolumeSkuRelation" :key="item.skuId" closable
					size="small" style="margin-right:10px;height: 25px;" effect="light"
					@close="delSpu(index)">{{ item.skuName }}</el-tag>
				<el-button type="primary" @click="selectShopList">关联商品</el-button>
			</el-form-item>

			<el-form-item label="状态:" prop="type">
				<el-radio-group v-model="form.status">
					<el-radio :label="0">启用</el-radio>
					<el-radio :label="1">停用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="销售金额(元):" prop="cardPrice">
				<el-input-number v-model="form.cardPrice" :min="0" :step="1"></el-input-number>
			</el-form-item>
			<el-form-item label="分销金(元):" prop="saleMoney">
				<el-input-number v-model="form.saleMoney" :min="0" :step="1" :max="form.cardPrice"></el-input-number>
			</el-form-item>
			<el-form-item label="是否限制使用次数:" prop="isUseNum">
				<el-radio-group v-model="form.isUseNum">
					<el-radio :label="0">关闭</el-radio>
					<el-radio :label="1">开启</el-radio>
				</el-radio-group>
				<span style="margin-left: 10px;">注意：开启使用次数，为当前卡项可以使用的次数</span>
			</el-form-item>
			<el-form-item label="使用次数:" prop="num" v-if="form.isUseNum == 1">
				<el-input-number v-model="form.num" :min="1"></el-input-number>
			</el-form-item>
			<el-form-item label="是否有使用时间限制:" prop="isUseDate">
				<el-radio-group v-model="form.isUseDate">
					<el-radio :label="0">关闭</el-radio>
					<el-radio :label="1">开启</el-radio>
				</el-radio-group>
				<span style="margin-left: 10px;">注意：使用时间限制，为当前卡项可以有效使用的时间（天数）</span>
			</el-form-item>
			<el-form-item label="有效时长(天):" prop="dateNum" v-if="form.isUseDate == 1">
				<el-input-number v-model="form.dateNum" :min="1"></el-input-number>
			</el-form-item>

			<el-form-item label="是否开启购买时间限制:" prop="isUseDate">
				<el-radio-group v-model="form.buyTimeType">
					<el-radio :label="0">关闭</el-radio>
					<el-radio :label="1">开启</el-radio>
				</el-radio-group>
				<span style="margin-left: 10px;">卡项销售的时间</span>
			</el-form-item>
			<el-form-item label="购买时间:" prop="startBuyTime" v-if="form.buyTimeType == 1">
				<el-date-picker v-model="form.startBuyTime" type="datetime" :value-format="valueFormat"
					placeholder="选择开始时间">
				</el-date-picker>
				至
				<el-date-picker v-model="form.endBuyTime" type="datetime" :value-format="valueFormat"
					placeholder="选择结束时间">
				</el-date-picker>
			</el-form-item>

			<el-form-item label="卡项说明:" prop="detail">
				<el-input v-model="form.detail" placeholder="请输入卡项简介" type="textarea" :rows="5" ></el-input>
			</el-form-item>

		</el-form>
		<el-row class="footer-fixed">

		</el-row>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" size="small" @click="submitForm(ruleRefForm)">保存</el-button>
				<el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
			</span>
		</template>
	</el-dialog>


	<select-shop v-model:dialogDrawer="dialogShopVisible" title="关联商品" :is-batch="true"
		@onSelectSubmit="selectShopSubmit"></select-shop>

</template>

<script>
import {
	computed,
	reactive,
	toRefs,
	ref
} from 'vue'
import {
	ElMessage
} from 'element-plus'
import { create, update } from '/@/api/pms/card'
import SelectShop from './SelectShop.vue'
export default {
	name: 'CardDetail',
	props: {
		dialogDrawer: {
			type: Boolean,
			default: false
		},
		defaultForm: {
			type: Object,
			default() {
				return {}
			}
		},
		title: {
			type: String,
			default: '新增'
		},
	},
	components: {
		SelectShop
	},
	setup(props, context) {
		const {
			dialogDrawer,
			defaultForm
		} = toRefs(props)
		const ruleRefForm = ref()
		const drawer = computed({
			get: () => dialogDrawer.value,
			set: val => {
				context.emit('update:dialogDrawer', val)
			}
		})
		let form = computed({
			get: () => defaultForm.value,
			set: val => {
				context.emit('update:defaultForm', val)
			}
		})
		const state = reactive({
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rules: {
				cardName: [{
					required: true,
					message: '请输入优惠卡名称',
					trigger: 'blur'
				}],
				cardPrice: [{
					required: true,
					message: '请输入销售金额',
					trigger: 'blur'
				}],
				num: [{
					required: true,
					message: '请输入次数',
					trigger: 'blur'
				}],
				dateNum: [{
					required: true,
					message: '请输入有效时长',
					trigger: 'blur'
				}],
				startBuyTime: [{
					required: true,
					message: '请选择购买时间',
					trigger: 'blur'
				}],

			},
			dialogShopVisible: false
		})
		const close = () => {
			context.emit('update:dialogDrawer', false)
		}
		const submitForm = async (formEl) => {
			if (!formEl) return
			await formEl.validate((valid) => {
				if (valid) {
					let data = form.value
					if (data.id != null && data.id != '') {
						update(data).then(res => {
							if (res.code == 0) {
								ElMessage.success("修改成功");
								context.emit('onDetailSubmit', true)
							} else {
								ElMessage.error("修改失败");
							}
						})
					}
					// 新增
					else {
						create(data).then(res => {
							if (res.code == 0) {
								ElMessage.success("添加成功");
								context.emit('onDetailSubmit', true)
							} else {
								ElMessage.error("添加失败");
							}
						})

					}
				}
			})

		}
		const resetForm = (formEl) => {
			if (!formEl) return
			context.emit('update:dialogDrawer', false)
			formEl.resetFields()
		}


		// 关联商品
		const selectShopList = () => {
			state.dialogShopVisible = true
		}
		const selectShopSubmit = (data) => {
			let v = []
			for (let d of data) {
				v.push({ skuId: d.skuInfos[0].skuId, skuName: d.spuName })
			}
			state.dialogShopVisible = false
			form.value.cardVolumeSkuRelation = v
		}
		//移除商品
		const delSpu = (index) => {
			form.value.cardVolumeSkuRelation.splice(index, 1)
		}

		return {
			drawer,
			form,
			submitForm,
			resetForm,
			close,
			ruleRefForm,
			selectShopList,
			selectShopSubmit,
			delSpu,
			...toRefs(state)
		}
	}

}
</script>

<style>

</style>
